<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /> <!--Thiết lập bảng mã trang web-->
        <title>Site Title</title>
        <meta name="description" content="Giao diện Mobile-first" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/><!--Bật Responsive-->
        
        <!---Insert CSS-->
        <link rel="stylesheet" href="normalize.min.css" /> <!--Reset CSS-->
        <link rel="stylesheet" href="style.css" media="screen,handheld" /><!--Default CSS-->
        <link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (min-width: 18.750em)" />
        <link rel="stylesheet" type="text/css" href="css/table.css" media="screen and (min-width: 34.375em)" />
        <link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 48em)" />
    
        <!--IE9 không hỗ trợ query media, do vậy ta sẽ dùng respond.js để bật Responsive cho IE9-->
        <!--[if lt IE 9]> 
            <script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script> 
        <![endif]-->
        
    </head>
    <body>
        <div class="top-bar">
            <p>HOT! Hostgator giảm giá 101% - <a href="#">Click để đăng ký</a></p>
        </div>
        <header id="header">
            <div class="site-title">
                <a href="#"><h1>Dark Silent</h1></a>
            </div>
            <div class="header-menu">
                <a href="#" class="show-menu">Menu</a>
                <ul>
                    <li><a href="#">Trang chủ</a></li>
                    <li><a href="#">Liên hệ</a></li>
                    <li>
                        <a href="#">Dịch vụ</a>
                        <ul> <!--Start sub menu-->
                            <li><a href="#">Thiết kế web</a></li>
                            <li><a href="">SEO</a></li>
                            <li><a href="">Quản trị</a></li>
                        </ul> <!--end sub menu-->
                    </li>
                    <li><a href="#">Hợp tác</a></li>
                </ul>
            </div>
        </header><!--end #header-->

        <div id="wrapper">
            <div class="featured-post">
                <div class="box">
                    <div class="post">
                        <img src="img/f-post-1.jpg" alt="Post 1">
                        <h2 class="post-title"><a href="#">Không tiền thì cạp đất mà ăn à?</a></h2>
                    </div>
                </div><!--end .box-->
                <div class="box">
                    <div class="post">
                        <img src="img/f-post-2.jpg" alt="Post 2">
                        <h2 class="post-title"><a href="#">Đã tìm ra thuốc trị HIV</a></h2>
                    </div>
                </div><!--end .box-->
                <div class="box">
                    <div class="post">
                        <img src="img/f-post-3.jpg" alt="Post 3">
                        <h2 class="post-title"><a href="#">Tôi chuẩn man!</a></h2>
                    </div>
                </div><!--end .box-->
            </div>
            <div class="content">











                
                <div class="content-main">
                    <div class="post">
                        <div class="post-thumbnail">
                            <img src="img/post_thumb.jpg" alt="Post 1">
                        </div>
                        <div class="post-info">
                            <h3>10 phần mềm quản lý thời gian tốt nhất</h3>
                            <div class="post-meta">
                                Đăng bởi <a href="#">Thạch Phạm</a> trong mục <a href="#">SEO</a>
                            </div>
                            <div class="post-exceprt">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi sapiente ullam at? Porro, suscipit, recusandae a labore placeat sed soluta fugit velit omnis possimus necessitatibus dolores error aspernatur voluptates.
                            </div>
                            <div class="post-below">
                                <div class="facebook">Facebook</div>
                                <div class="googleplus">Google+</div>
                                <div class="more">
                                    <a href="#">Đọc tiếp</a>
                                </div>
                            </div>
                        </div><!--end .post-info-->
                    </div><!--end .post-->

                    <div class="post">
                        <div class="post-thumbnail">
                            <img src="img/post_thumb.jpg" alt="Post 1">
                        </div>
                        <div class="post-info">
                            <h3>10 phần mềm quản lý thời gian tốt nhất</h3>
                            <div class="post-meta">
                                Đăng bởi <a href="#">Thạch Phạm</a> trong mục <a href="#">SEO</a>
                            </div>
                            <div class="post-exceprt">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi sapiente ullam at? Porro, suscipit, recusandae a labore placeat sed soluta fugit velit omnis possimus necessitatibus dolores error aspernatur voluptates.
                            </div>
                            <div class="post-below">
                                <div class="facebook">Facebook</div>
                                <div class="googleplus">Google+</div>
                                <div class="more">
                                    <a href="#">Đọc tiếp <span class="fa-share"></span></a>
                                </div>
                            </div>
                        </div><!--end .post-info-->
                    </div><!--end .post-->
                    <div class="pagination">
                        Trang 1/15 &nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;2&nbsp;3&nbsp;4&nbsp;5
                    </div>
                    <div class="category-content">
                        <div class="cat-1">
                            <h3>Thủ thuật WordPress</h3>
                            <div class="post-info">
                                <img src="img/post_thumb_cat.jpg" alt="Post 1">
                                <h4>Giveaway 10 phần ThemeFuse</h4>
                                <ul class="child">
                                    <li><a href="#">Hướng dẫn thiết kế theme WordPress</a></li>
                                    <li><a href="#">Cách tự làm widget trong WordPress</a></li>
                                    <li><a href="#">Serie học WordPress từ A tới Z</a></li>
                                    <li><a href="#">Cách chọn host để cài WordPress</a></li>
                                </ul>
                            </div>
                        </div><!--end cat-->
                        <div class="cat-2">
                            <h3>Thủ thuật WordPress</h3>
                            <div class="post-info">
                                <img src="img/post_thumb_cat.jpg" alt="Post 1">
                                <h4>Giveaway 10 phần ThemeFuse</h4>
                                <ul class="child">
                                    <li><a href="#">Hướng dẫn thiết kế theme WordPress</a></li>
                                    <li><a href="#">Cách tự làm widget trong WordPress</a></li>
                                    <li><a href="#">Serie học WordPress từ A tới Z</a></li>
                                    <li><a href="#">Cách chọn host để cài WordPress</a></li>
                                </ul>
                            </div>
                        </div><!--end cat-->                        
                    </div><!--end .category-content-->
                </div>
                <div class="sidebar">
                    <div class="widget search">
                        <form action="#">
                            <input type="text" placeholder="Nhập từ khóa" />
                            <input type="submit" value="Tìm">
                        </form>
                    </div>
                    <div class="recent-post widget">
                        <h4 class="widget-title">Bài mới đăng</h4>
                        <ul>
                            <li>
                                <div class="post-thumbnail">
                                    <img src="img/post_thumb_100x100.jpg" alt="Post">
                                </div>
                                <a href="#">10 phần mềm quản lý thời gian</a>
                            </li>
                            <li>
                                <div class="post-thumbnail">
                                    <img src="img/post_thumb_100x100.jpg" alt="Post">
                                </div>
                                <a href="#">10 phần mềm quản lý thời gian</a>
                            </li>
                            <li>
                                <div class="post-thumbnail">
                                    <img src="img/post_thumb_100x100.jpg" alt="Post">
                                </div>
                                <a href="#">10 phần mềm quản lý thời gian</a>
                            </li>
                        </ul>
                    </div><!--end recent-post-->
                    <div class="ads">
                        <img src="img/ads-250x250.jpg" alt="Ads" />
                    </div>
                </div>
            </div><!--end .content-->
        </div><!--end #wrapper-->
        <footer id="footer">
            <div class="col-1">
                <h4 class="widget-title">Dark Silent Blog</h4>
                <ul>
                    <li>Linnevägen 1B</li>
                    <li>64136,Katrineholm</li>
                    <li>333.555.666</li>
                    <li>contact@darksilent.com</li>
                </ul>
            </div>
            <div class="col-2">
                <h4 class="widget-title">Đăng ký nhận bản tin</h4>
                <p>Đăng ký nhận bản tin để theo dõi các bài viết mới nhất tại darksilent.com</p>
                <div class="optin-form">
                    <form action="#">
                        <input type="text" placeholder="Nhập email của bạn" />
                        <input type="submit" value="Đăng ký" />
                    </form>
                </div>
            </div>
            <div class="col-3">
                <h4 class="widget-title">Gallery</h4>
                <ul>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                    <li><img src="img/post_thumb_100x100.jpg" alt="Image"></li>
                </ul>
            </div>
        </footer><!--end #footer-->
        
        <!--Chèn jQuery-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <!--End jQuery-->
        
        
        <!--Chèn custom javascript-->
        <script src="js/main.js"></script>
    </body>
</html>
